<%--
  Created by IntelliJ IDEA.
  User: 86171
  Date: 2017/10/8
  Time: 20:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>bootstrap-dropdown学习</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.js"></script>
    <script type="text/javascript" src="/js/pagejs/bootstrap/bootstrap-alert.js"></script>

</head>
<body>
<h1>在导航栏内使用</h1>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div  class="navbar-header">
            <a class="navbar-brand">
                菜鸟教程
            </a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#">IOS</a>
                </li>
                <li>
                    <a href="#">SVn</a>
                </li>
                <li class="dropdown">
                    <a class="dropdown-toggle" href="#" data-toggle="dropdown">
                        java
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">EJB</a>
                        </li>
                        <li>
                            <a href="#">Spring</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">分离的链接</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

    </div>
</nav>
<p>带有下拉菜单的标签页</p>
<ul class="nav nav-tabs">
    <li class="active">
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">SVN</a>
    </li>
    <li>
        <a href="#">IOS</a>
    </li>

    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            JAVA
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li>
                <a href="#">
                    Spring
                </a>
            </li>
            <li>
                <a href="#">
                    Struts2
                </a>
            </li>
            <li>
                <a href="#">
                    Spring Mvc
                </a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">
            PHP
        </a>
    </li>
</ul>
</body>
</html>
